<template>
	<view class="nav-bar-custom" :style="{height: navHeight}">
		<view class="status-bar-cont" :style="{height: statusBarHeight}"></view>
		<view class="nav-bar-cont" :style="{height: navBarHeight}">
			<!-- 返回按钮 -->
			<image v-if="showNavBack" class="nav-bar-back" src="@/static/back_arrow.png" @click="handleNavBack"></image>
			<!-- 下拉选择标题 -->
			<view class="nav-bar-select" v-if="type == 1" @click="handleOpen">
				<view class="nav-bar-select-value">{{selectTitle}}</view>
				<image class="nav-bar-select-img" :src="isOpen ? '../static/up_arrow.png' : '../static/down_arrow.png'">
				</image>
			</view>
			<!-- 导航栏标题 -->
			<view class="nav-bar-title" v-else>{{title}}</view>
		</view>
		<!-- 弹框选择标题 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" @maskClick="isOpen = false">
			<scroll-view class="popup-cont" scroll-y>
				<view class="popup-header">请选择</view>
				<view class="popup-title" v-for="(item, index) in selectList" :key="index"
					@click="handleSelectChange(item)">{{item[selectKey]}}</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, computed, watch, withDefaults } from 'vue';
	import { useNavbar } from "@/utils/hooks.js";
	interface SelectItem {
		text : string,
		value : any
	}
	const props = withDefaults(defineProps<{
		title ?: string, //页面标题
		type ?: any, //标题类型，默认静态文字，1：下拉选择标题
		delta ?: any, //返回的页面数，默认1
		selectKey ?: string, //下拉选择，数组显示的字段key值
		selectList ?: [], //下拉选择项
	}>(), {
		title: "",
		type: 0,
		delta: 1
	});

	// 修改title的值
	const selectTitle = ref(props.title);

	// 下拉选择-同步更新，返回按钮事件
	const emit = defineEmits(["selectChange", "backClick"]);

	// 弹框实例
	const popup = ref()

	// 弹框是否显示
	const isOpen = ref(false)

	const { statusBarHeight, navBarHeight, navHeight } = useNavbar();

	const currentPage = ref(null)

	const showNavBack = computed(() => {
		let arr = ["pages/login/index", "pages/index/index"];
		if (arr.indexOf(currentPage.value) !== -1) {
			return false;
		}
		return true;
	});

	// 监听title值的变化
	watch(() => props.title, (val) => {
		selectTitle.value = val;
	});

	getCurrentRouter()

	// 获取当前页面路由
	function getCurrentRouter() {
		const pages = getCurrentPages();
		currentPage.value = pages[pages.length - 1].route;
	}

	// 关闭当前页面
	function handleNavBack() {
		if (props.delta != 1) {
			// 返回多级页面，默认返回上一级页面
			emit("backClick");
			return;
		}
		uni.navigateBack({
			delta: props.delta
		});
	}

	// 标题栏：下拉选择
	function handleOpen() {
		isOpen.value = true;
		popup.value.open();
	}

	// 标题栏：选中
	function handleSelectChange(e : any) {
		selectTitle.value = e[props.selectKey];
		isOpen.value = false;
		popup.value.close();
		emit("selectChange", e);
	}
</script>
<style lang="scss" scoped>
	.nav-bar-custom {
		background: url("@/static/navbg.jpg") center no-repeat;
		background-size: 100% 100%;

		.nav-bar-cont {
			padding: 0 20px;
			display: flex;
			align-items: center;
		}

		.nav-bar-back {
			width: 20px;
			height: 20px;
		}

		.nav-bar-title {
			margin: 0 auto;
			color: #fff;
			font-size: 20px;
			font-weight: 500;
		}

		.nav-bar-select {
			margin: 0 auto;
			display: flex;
			align-items: center;
		}

		.nav-bar-select-value {
			color: #fff;
			font-size: 20px;
			font-weight: 500;
		}

		.nav-bar-select-img {
			padding-left: 10px;
			width: 16px;
			height: 16px;
		}
	}

	.popup-cont {
		background: #fff;
		max-height: 80vh;

		.popup-title,
		.popup-header {
			height: 50px;
			line-height: 50px;
			color: #333;
			font-size: 14px;
			text-align: center;
			border-top: 1px solid #eee;
		}

		.popup-header {
			font-size: 16px;
			font-weight: 600;
		}
	}
</style>